// 加号功能面板
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { adapt, adaptFontSize } from '../../ulits/Adapt';

// 加号功能面板组件
const MorePanel: React.FC = () => {
  return (
    <View style={styles.morePanel}>
      {/* 第一行功能 */}
      <View style={styles.morePanelRow}>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>🖼️</Text>
          <Text style={styles.morePanelText}>相册</Text>
        </View>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>📷</Text>
          <Text style={styles.morePanelText}>拍摄</Text>
        </View>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>🎥</Text>
          <Text style={styles.morePanelText}>视频通话</Text>
        </View>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>📍</Text>
          <Text style={styles.morePanelText}>位置</Text>
        </View>
      </View>
      {/* 第二行功能 */}
      <View style={styles.morePanelRow}>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>✉️</Text>
          <Text style={styles.morePanelText}>红包</Text>
        </View>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>📁</Text>
          <Text style={styles.morePanelText}>文件</Text>
        </View>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>💸</Text>
          <Text style={styles.morePanelText}>转账</Text>
        </View>
        <View style={styles.morePanelItem}>
          <Text style={styles.morePanelIcon}>📞</Text>
          <Text style={styles.morePanelText}>语音通话</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  morePanel: {
    backgroundColor: '#181818',
    borderTopLeftRadius: adapt(16),
    borderTopRightRadius: adapt(16),
    paddingVertical: adapt(24),
    paddingHorizontal: adapt(12),
    minHeight: adapt(230),
    position: 'relative',
    marginTop: 2,
    marginBottom: 0,
  },
  morePanelRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: adapt(16),
  },
  morePanelItem: {
    alignItems: 'center',
    flex: 1,
  },
  morePanelIcon: {
    fontSize: adaptFontSize(32),
    backgroundColor: '#222',
    borderRadius: adapt(16),
    width: adapt(54),
    height: adapt(54),
    textAlign: 'center',
    textAlignVertical: 'center',
    marginBottom: adapt(8),
    color: '#fff',
    includeFontPadding: false,
    lineHeight: adapt(54),
  },
  morePanelText: {
    color: '#fff',
    fontSize: adaptFontSize(14),
  },
});

export default MorePanel;